<!-- 收款记录列表 -->
<template>
    <div class="collection-record">
        <el-dialog
            v-el-drag-dialog="{ drag: true, full: false, resize: false }"
            :visible="true"
            :close-on-click-modal="false"
            @close="closeMd"
            :title="`收款记录`"
            width="80%">
            <div ref="dgtools" class="filter-container">
                <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
                    <!-- <el-form-item>
                        <el-input
                            style="width: 200px"
                            placeholder="联系人/电话（支持模糊查询）"
                            v-model="dg.ps.find">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-select
                            v-model="dg.ps.staffState"
                            placeholder="在职状态"
                            style="width: 100px"
                            clearable>
                            <el-option label="正式" value="NORMAL"></el-option>
                            <el-option label="试用" value="TRY"></el-option>
                            <el-option label="离职" value="LEAVE"></el-option>
                        </el-select>
                    </el-form-item> -->
                    
                    <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
                    <el-button type="primary" icon="el-icon-check" @click="okRevoke">确认撤销</el-button>
                </el-form>

                <!-- <TableSelfSet 
                    v-if="dg.columns.length > 0" 
                    :tbTitle="'收款记录列表'" 
                    :dgName="dg.dgName" 
                    :tbId="dg.tbName" 
                    :srcCols="dg.srcCols" 
                    :columns="dg.columns" 
                    @saveSet="saveTbSet"
                /> -->
            </div>
            <el-table
                :ref="dg.tbName"
                :data="dg.list"
                row-key="id"
                :height="bodyHeight - 300"
                border fit 
                :row-class-name="rowClassName"
                @header-dragend="dragHeader"
                @selection-change="selRowChange">
                <el-table-column fixed="left" type="index" label="编号" width="40" align="center"></el-table-column>
                <el-table-column fixed="left" type="selection" width="40" align="center"></el-table-column>
                <el-table-column 
                    v-for="(col, index) in dg.columns" 
                    :key="index"
                    :class-name="dg.dgName"
                    :prop="col.field"
                    :label="col.label"
                    :width="col.width">
                    <template slot-scope="{row}">
                        <template v-if="col.field == 'addTime'">
                            <span>{{row.addTime}}</span>
                        </template>

                        <span v-else-if="col.field == 'operUser'">
                            {{row.operUser.realName}}
                        </span>

                        <span v-else-if="col.field == 'reimUser'">
                            {{row.reimUser.realName}}
                        </span>

                        <span v-else-if="col.field == 'gainTime'">{{row.addTime.substr(0, 16)}}</span>

                        <template v-else>{{ getColVal(row, col.field) }}</template>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import * as orderSer from '@/api/services/order.service';

export default {
    name: 'CollectionRecord',
    mixins: [ DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components:{ TableSelfSet, Pagination },
    props: { myData: Object },
    data() { 
        let cols = [
            { label: "经办人", field: "operUser", width: 80 },
            { label: "往来客户", field: "reimUser", width: 90 },
            { label: "车牌号", field: "plateNum", width: 70 },
            { label: "摘要", field: "remark", width: 80 },
            { label: "借方金额", field: "gathMoney", width: 90 },
            { label: "贷方金额", field: "payMoney", width: 180 },
            { label: "记账时间", field: "gainTime", width: 120 },
            { label: "添加时间", field: "addTime", width: 130 },
        ];

        return {
            // 撤销条数
            revokeCount: 0,

            dg: {// 数据列表参数
                dgName: 'dg',
                tbName: 'collectionRecordTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    // 查询操作编号
                    operMark: this.myData.obj.operMark || '',
                    // 交易类型
                    reimType: 'SERVICEGATH',
                },
            },

        }
    },
    created() {
        const that = this;
        console.log(this.myData);

        that.initTbSetData(that.dg.dgName);

        that.getDgList();
    },
    methods:{
        closeMd() {
            this.$emit("myClick", {state: false});

            // 调用父组件方法-重新加载数据
            if(this.revokeCount > 0) this.$emit("reloadDg");
        },
        /** 获取-列表数据 */
        getDgList(){
            const that = this, ps = that.U.scopy(that.dg.ps);

            orderSer.getCollListRecord(ps).then(res => {
                if(res.code == 1){
                    let list = res.data;

                    list.forEach(it => { it.dgName = that.dg.dgName; });
                
                    that.dg.list = list;
                }
            });
        },

        /** 确认撤销 */
        okRevoke(){
            const that = this, U = that.U, rows = that.getSeledRows();

            if(rows.length !== 1){
                U.qerror('请选择一条数据');
            }else{
                let row = rows[0];
                U.qconfim(`确认撤销所选记录吗？`).then(r => {
                    if(r){
                        let ps = {cancelOperMark: row.operMark};
                        orderSer.revokeCollListRecord(ps).then(res => {
                            if(res.code !== 1){
                                U.qerror(res.msg);
                            }else{
                                this.revokeCount++;

                                U.qsuccess(res.msg);

                                // 刷新列表
                                this.getDgList();
                            }
                        });
                    }
                });
            }
        },

        
    },
 }
</script>